<!--
嵌套塌陷
    嵌套关系（父子关系）的块元素，
    父有m-top，子也有m-top，此时会发生塌陷，较小间距会塌陷进较大间距中，
    造成的影响是：“好像”较小间距的外边距设置无效一样！直接凹陷进去了！

解决
    方法1：给父元素设置上边框 border-top
    方法2：给父元素设置上内边距 padding-top
    方法3：给父元素添加溢出隐藏 overflow:hidden    // 相对于方法1、2，此方法不会撑大盒子！
    其它方法：浮动、固定定位、绝对定位等。
-->
<style>
    body {
        margin: 0;
    }
    /* 页面效果是50，也就是取两者中较大者的间距，明显间距较小的塌陷嵌入了较大的间距里 */
    /* 要么子塌陷进父，要么父塌陷进子 */
    .father {
        width: 400px;
        height: 200px;
        /* 20 */
        margin-top: 20px;
        /* 50 */
        /* margin-top: 50px; */
        background: cyan;
        /* 解决 */
        /* border: 1px solid transparent; */
        /* border-top: 1px solid transparent; */
        /* padding: 1px; */
        /* padding-top: 1px; */
        overflow: hidden;
    }
    .son {
        width: 200px;
        height: 100px;
        /* 20 */
        /* margin-top: 20px; */
        /* 50 */
        margin-top: 50px;
        background: blue;
    }
</style>

<div class="father">
    <div class="son"></div>
</div>